<template>
  <div>
    <div v-show="!isShowFlowDetail">
      <jxf-titletip :title="title" @refreshPage="refreshPage" :hasGoBack="isHasGoBack" @goBack="goPrewview"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="settlementInfo" ref="settlementInfo">
          <el-form-item label="流水编号:" prop="tradeNo">
            <el-input v-model="settlementInfo.tradeNo" clearable ref="input-tradeNo" @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="结算事项:" prop="type">
            <el-select v-model="settlementInfo.type" clearable placeholder="全部">
              <el-option label="入账" value="1"></el-option>
              <el-option label="出账" value="2"></el-option>
            </el-select>
          </el-form-item>
          <jxf-Date label="结算时间段:" :startTime.sync="settlementInfo.settleStartTime" :endTime.sync="settlementInfo.settleEndTime" startTimeProp="settleStartTime" endTimeProp="settleEndTime"></jxf-Date>
          <el-form-item label="摘要:" prop="transCode">
            <el-select v-model="settlementInfo.transCode" clearable placeholder="全部">
              <el-option label="订单结算" value="1"></el-option>
              <el-option label="申请转出" value="2"></el-option>
              <el-option label="转出保理手续费" value="3"></el-option>
              <el-option label="转账" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('settlementInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportInfo" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="settlementTable">
          <template slot="createTime" slot-scope="account">
            <div>{{account.row.createTime ? FormatDate.timeFormat(account.row.createTime) : ""}}</div>
          </template>
          <template slot="type" slot-scope="account">
            <div v-if="account.row.type === 1">入账</div>
            <div v-if="account.row.type === 2">出账</div>
            <div v-else></div>
          </template>
          <template slot="transCode" slot-scope="account">
            <div v-if="account.row.transCode === 1">订单结算</div>
            <div v-if="account.row.transCode === 2">申请转出</div>
            <div v-if="account.row.transCode === 3">转出保理手续费</div>
            <div v-if="account.row.transCode === 4">转账</div>
            <div v-else></div>
          </template>
          <template slot="amount" slot-scope="account">
            <div>￥{{account.row.amount && account.row.amount != 0 ? formatMoney.twoDecimal(account.row.amount) : '0.00'}}</div>
          </template>
          <template slot="newAmount" slot-scope="account">
            <div>￥{{account.row.newAmount && account.row.newAmount != 0 ? formatMoney.twoDecimal(account.row.newAmount) : '0.00'}}</div>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <FlowDetail v-if="isShowFlowDetail"></FlowDetail>
  </div>
</template>

<script>
  import FlowDetail from './FlowDetail'
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
    export default {
        name: "AccountModel",
        components: { FlowDetail },
        props: {

        },
        data() {
          return {
            title: "结算账户流水",
            settlementInfo: {
              tradeNo: "",
              type: "",
              settleStartTime: "",
              settleEndTime: "",
              transCode: ""
            },
            isHasGoBack: this.$route.params && this.$route.params.userId ? false : false,
            isSuccess: false,
            FormatDate: FormatDate,
            formatMoney: formatMoney,
            isShowFlowDetail: false,
            settlementTable: {
              border:true,
              loading:false,
              hasSelect:false,
              hasOperation:false,
              tr: [
                {
                  id: '1',
                  label: '流水编号',
                  prop: 'tradeNo',
                  width: '210',
                  fixed: "left"
                },
                {
                  id: '2',
                  label: '结算时间',
                  show: 'template',
                  width: '160',
                  prop: 'createTime'
                },
                {
                  id: '3',
                  minWidth: '140',
                  label: '供应商企业名称',
                  prop: 'enterpriseName'
                },
                {
                  id: '4',
                  label: '结算事项',
                  prop: 'type',
                  show: 'template'
                },
                {
                  id: '5',
                  label: '结算金额',
                  prop: 'amount',
                  show: 'template'
                },
                {
                  id: '6',
                  minWidth: '100',
                  label: '结算后余额',
                  show: 'template',
                  prop: 'newAmount'
                },
                {
                  id: '7',
                  label: '摘要',
                  show: 'template',
                  prop: 'transCode'
                },
              ],
              operation: [],
              data: []
            },
            pageTotal:40,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          // 返回前面一个页面
          goPrewview() {
            // window.history.back(-1);
            this.$router.push({name: 'supplierCapitalAccount', params: {
              page: 'supplierCapitalAccount', currentPage: this.$route.params.currentPage, pageSize: this.$route.params.pageSize
            }})
          },
          exportInfo(){
            this.isSuccess = true;
            let info = {
              ...this.settlementInfo,
              pageSize: this.pageSize,
              pageNum: this.currentPage,
              userId: this.$route.params.userId
            }
            ajax.export(apis.factory.exportSettleRunningList, info)
              .then(res => {
                this.isSuccess = false;
              })
          },
          refreshPage() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.resetForm('settlementInfo')
            this.getData()
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          getData() {
            this.settlementTable.loading = true;
            let data = {
              ...this.settlementInfo,
              ...this.$route.params,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.finance.getSettleRunningList, data).then(res => {
              if(res.code === "10000000") {
                this.settlementTable.data = res.data.dataList;
                this.pageTotal = res.data.total
              } else {
                this.$message.error(res.message)
              }
              this.settlementTable.loading = false;
            })
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          },
          watchDetail() {
            this.isShowFlowDetail = true;
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo;
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
        },
        created() {
          this.onSearch()
        }
    }
</script>

<style scoped>

</style>
